<template>
	<view>
		<view class="category-goods-list" :class="value.goods_list_type == 1 ? 'control-goods-list-big' : 'control-goods-list-small'">
			<view v-for="(item, index) in goodsList" :key="index" @click="goDetail(item.goods_id, item.promotion_type)" class="item ns-border-color-gray">
				<view class="control-thumbnail"><image :src="$util.img(item['pic_cover_mid'])" mode="aspectFit" /></view>

				<view class="control-con">
					<view v-if="value['goods_show_goods_name'] == 1" class="control-goods-name ns-font-size-base">
						<text v-if="item.group_name != ''" class="goods-tab ns-font-size-sm ns-bg-color">{{ item.group_name }}</text>
						<text>{{ item['goods_name'] }}</text>
					</view>
					
					<view v-if="value['goods_show_goods_price'] == 1" class="control-goods-price">
						<text class="ns-text-color price ns-font-size-lg">
							￥{{ item['promotion_price'] }}
							<text v-if="item.shipping_fee == 0" class="shipping-fee ns-font-size-sm ns-text-color ns-border-color">包邮</text>
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// 商品列表
import http from 'common/js/http.js';
export default {
	name: 'diy-goods-list',
	props: {
		value: {
			type: Object,
			default: () => {
				return { goods_limit_count: 6, goods_source: 0 };
			}
		}
	},
	mixins: [http],
	data() {
		return {
			goodsList: []
		};
	},
	created() {
		this.getGoodsList();
	},
	methods: {
		getGoodsList() {
			let condition = JSON.stringify({
				'ng.category_id_1': this.value.goods_source,
				'ng.state': 1
			});
			this.sendRequest({
				url: 'System.Goods.goodsList',
				data: { page_size: this.value.goods_limit_count, condition: condition },
				success: res => {
					let data = res.data;
					if (data != null) {
						this.goodsList = data.data;
					}
				}
			});
		},
		goDetail(goodsId, promotion_type) {
			if(promotion_type == 1){
				this.$util.redirectTo('/promotionpages/groupbuy/detail/detail', { goods_id: goodsId });
			}else{
				this.$util.redirectTo('/pages/goods/detail/detail', { goods_id: goodsId });
			}
		}
	}
};
</script>

<style>
.category-goods-list{
	background:#fff
}
.control-con{
	padding: 20rpx 20rpx 16rpx;
}
.control-thumbnail {
	text-align: center;
}
.control-goods-price {
	height: 60rpx;
	line-height: 60rpx;
}
.control-goods-price .price {
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline-block;
	font-size: $ns-font-size-base;
}

.goods-tab {
	color: #fff;
	padding: 2rpx 6rpx;
	margin-right: 10rpx;
	border-radius: 4rpx;
}

.shipping-fee {
	background: #fff;
	padding: 2rpx 6rpx;
	margin-left: 10rpx;
	border-radius: 4rpx;
	border: 1px solid;
	display: inline-block;
	line-height: 1;
}

.control-goods-list-big .item {
	margin: 0 20rpx 20rpx;
	background-color: #fff;
	border-radius: 12rpx;
	border:1rpx solid #ccc;
	padding-top: 1rpx;
	overflow: hidden;
}
.control-goods-list-big .control-thumbnail{
	width: 707rpx;
	height: 707rpx;
}
.control-goods-list-big .control-thumbnail image{
	width: 707rpx;
	height: 707rpx;
}
.control-goods-list-big .item .control-goods-name {
	font-weight: bold;
	margin: 20rpx 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.control-goods-list-small {
	overflow: hidden;
	display: flex;
	flex-flow: wrap;
	padding: 0 20rpx;
}
.control-goods-list-small .item {
	margin-top: 20rpx;
	flex-direction: column;
	width: calc((100% - 30rpx) / 2);
	background: #fff;
	border-radius: 12rpx;
	border:1rpx solid #ccc;
	padding-top: 1rpx;
}
.control-goods-list-small .item:nth-child(2n + 1) {
	margin-right: 20rpx;
}
.control-goods-list-small .control-thumbnail {
	overflow: hidden;
	width: 339rpx;
	height: 339rpx;
	border-radius: 10rpx;
	text-align: center;
	line-height: 339rpx;
}
.control-goods-list-small .control-thumbnail image{
	width: 339rpx;
	height: 339rpx;
}
.control-goods-list-small .control-goods-name {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

</style>
